<!--  -->
<template>
    <div class="view-page">
        <div class="content">
            <img :src="blogDetail.cover" alt="" class="cover-image">
            <h1 class="title">{{ blogDetail.title }}</h1>
            <div v-html="blogDetail.content" style="width: 100%" class="content-html"></div>
        </div>
    </div>
</template>

<script>
import { selectBlogDetail } from "@/config/api";
export default {
    data() {
        return {
            blogDetail: {}
        };
    },
    mounted() {

    },
    created() {
        console.log(1111)
        console.log(this.$route.query.id)
        selectBlogDetail(this.$route.query.id).then((res) => {
            console.log(res);
            if (res.code === 200) {
                this.blogDetail = res.data;
            }
        });
    },
    methods: {

    },
}
</script>
<style scoped lang="less">
.view-page {
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

.content {
    max-width: 1080px;
    padding: 20px 100px;
    padding-bottom: 50px;
    box-sizing: border-box;
    background-color: #ffffff;

    .cover-image {
        width: 100%;
        object-fit: cover;
    }

    .title {
        font-size: 30px;
        font-weight: 700;
        color: #282828;
        margin: 0;
        line-height: 1.4;
        margin-bottom: 20px;
        margin-top: 20px;
        border-bottom: 1px solid #b7b7b7;
        padding-bottom: 10px;
    }

    .content-html {
        padding: 20px 0;
    }
}
</style>